<!-- created:2022/12/19 20:59 By AdinZ -->
<template>
    <div class="index dashboard">
        <el-row :gutter="20">
            <el-col :span="12">
                <h2>财务指标 <span style="float: right;font-size: 14px;font-weight: normal">2023-05-11 12:00:00</span>
                </h2>
                <el-divider/>
                <el-row>
                    <el-col :span="8" class="item">
                        <div class="item-value">
                            <p class="number">222</p>
                            <p class="label">销售额</p>
                        </div>
                        <div class="rate">
                            <div class="rate-item">
                                <span class="label">比昨天</span>
                                <el-icon class="rate-icon " style="color: aquamarine">
                                    <ArrowUpBold/>
                                </el-icon>
                                <div class="value">
                                    0.12%
                                </div>
                            </div>
                            <div class="rate-item">
                                <span class="label">比七日</span>
                                <el-icon class="rate-icon" style="color: red">
                                    <ArrowDownBold/>
                                </el-icon>
                                <div class="value">
                                    0.12%
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="item">
                        <div class="item-value">
                            <p class="number">222</p>
                            <p class="label">销售额</p>
                        </div>
                        <div class="rate">
                            <div class="rate-item">
                                <span class="label">比昨天</span>
                                <el-icon class="rate-icon " style="color: aquamarine">
                                    <ArrowUpBold/>
                                </el-icon>
                                <div class="value">
                                    0.12%
                                </div>
                            </div>
                            <div class="rate-item">
                                <span class="label">比七日</span>
                                <el-icon class="rate-icon" style="color: red">
                                    <ArrowDownBold/>
                                </el-icon>
                                <div class="value">
                                    0.12%
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="item">
                        <div class="item-value" style="border-right: none">
                            <p class="number">222</p>
                            <p class="label">销售额</p>
                        </div>
                        <div class="rate">
                            <div class="rate-item">
                                <span class="label">比昨天</span>
                                <el-icon class="rate-icon " style="color: aquamarine">
                                    <ArrowUpBold/>
                                </el-icon>
                                <div class="value" style="color: aquamarine">
                                    0.12%
                                </div>
                            </div>
                            <div class="rate-item">
                                <span class="label">比七日</span>
                                <el-icon class="rate-icon" style="color: red">
                                    <ArrowDownBold/>
                                </el-icon>
                                <div class="value" style="color: red">
                                    0.12%
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </el-col>
            <el-col :span="12">
                <div class="chart-box">
                    <div class="chart" ref="chart_rose"
                         style="position: relative; overflow: hidden;height: 100%;"></div>
                </div>
            </el-col>


            <el-col :span="24" style="margin-top: 30px;">
                <div class="line-chart" ref="chart_line">

                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script setup>
import {onMounted, ref,h} from "vue";
import * as echarts from 'echarts';
import Col from "@/components/TablePage/Render";
import {ElButton} from "element-plus";

const chart_rose = ref(null);
const chart_line = ref(null);
onMounted(() => {
    initRoseChart()

    initLineChart()
})

const test={
    render:h(ElButton,{type:'primary',class:'test-div',innerHTML:'测试赛房间爱卡机'})
}


const initRoseChart = () => {
    const option = {
        title: {
            text: '店铺发量统计',
            left: 'left'
        },
        legend: {
            orient: 'vertical',
            right: 'right'
        },

        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: '100%',
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    {value: 26, name: 'rose 6'},
                    {value: 22, name: 'rose 7'},
                    {value: 18, name: 'rose 8'}
                ]
            }
        ]
    };
    const myChart = echarts.init(chart_rose.value, null, {
        height: 250
    });
    myChart.setOption(option)
}

const initLineChart = () => {
    const option = {
        title: {
            text: '店铺发量统计',
            left: 'left'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            bottom: 'bottom',
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
            left: 0,
            top: 100,
            right: 0,
            bottom: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                smooth: true,
                areaStyle: {},
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                smooth: true,
                areaStyle: {},
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                smooth: true,
                areaStyle: {},
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                smooth: true,
                areaStyle: {},
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                smooth: true,
                areaStyle: {},
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    const myChart = echarts.init(chart_line.value, null, {
        height: 700
    });
    myChart.setOption(option)
}


</script>


<style scoped lang="scss">
.dashboard {
  padding: 20px;

  .item {
    margin-bottom: 20px;
    text-align: center;

    .item-value {
      margin-bottom: 20px;
      border-right: 1px dotted #cccccc;

      .label {
        color: #7a8599;
      }
    }

    .number {
      font-size: 40px;
      font-weight: bold;
    }

    .rate {
      color: #7a8599;
      font-size: 12px;

      &-item {
        display: flex;
        align-items: center;
        line-height: 25px;
        justify-content: center;
      }

      &-icon {
        margin-left: 10px;
      }

      .value {
        padding-left: 5px;
      }
    }

    .item-0 {
      border-right: 1px dotted #cccccc;
    }

  }
}
</style>
